/**
 * @Author: zhangxue
 * @Date: 2021/1/25
 * @LastEditTime: 9:47
 * @Description: echarts图公共配置
 * @FilePath: Uranus
 **/
// const echarts = require("echarts");
const charts = {
  // 玫瑰环形图
  pieOption: {
    tooltip: {
      trigger: "item",
      formatter: "{b}:{c}个",
      backgroundColor: "#fff"
    },
    title: {
      show: true,
      text: "总数",
      subtext: "125",
      textStyle: {
        fontSize: 18,
        color: "#00d5ff",
        lineHeight: 30,
        fontWeight: "normal"
      },
      subtextStyle: {
        fontSize: 24,
        color: "#00d5ff",
        lineHeight: 40,
        fontWeight: "normal"
      },
      textAlign: "center",
      left: "50%",
      top: "40%"
    },
    legend: {
      show: false
    },
    color: ["#00feff", "#00ccff", "#0099ff", "#feff99", "#c4ff99", "#0099ff", "#18ba7f"],
    series: [
      {
        name: "pie 1",
        type: "pie",
        clockWise: true,
        radius: ["35%", "70%"],
        roseType: "area",
        label: {
          show: true,
          fontSize: 16,
          color: "rgba(0,213,255,0.7)",
          formatter: "{b}：{c}\n{d}%",
          lineHeight: 22
        },
        labelLine: {
          show: true,
          lineStyle: {
            color: "rgba(0,213,255,0.7)"
          }
        },
        center: ["50%", "50%"],
        hoverAnimation: false,
        data: [
          {
            value: 12,
            name: "12"
          }, {
            name: "23",
            value: 100 - 12
          }]
      }
    ]
  },
  // 有背景的柱状图
  barOption: {
    tooltip: {
      trigger: "item",
      formatter: "{b}：{c}",
      backgroundColor: "rgba(0,0,0,0.9)",
      show: true,
      padding: [7, 15, 9, 15],
      textStyle: {
        color: "#fff",
        fontSize: 12
      },
      borderWidth: 0
    },
    xAxis: {
      type: "category",
      axisLine: {
        lineStyle: {
          color: "rgba(0,120,255,0.3)",
          width: 1
        }
      },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: {
        // interval: 0,
        color: "#40a5f4",
        fontSize: 16,
        rotate: 15
      },
      data: []
    },
    yAxis: {
      type: "value",
      splitNumber: 5,
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: {
        lineStyle: {
          color: "rgba(0,120,255,0.3)",
          type: "solid"
        }
      },
      axisLabel: {
        color: "#40a5f4",
        fontSize: 16
      }
    },
    grid: {
      top: 40,
      left: 0,
      right: 0,
      bottom: 0,
      containLabel: true
    },
    legend: {
      show: false
    },
    series: [
      {
        name: "监管总数",
        data: [],
        type: "bar",
        barWidth: 26,
        label: {
          show: false
        },
        zlevel: 1,
        itemStyle: {
          // barBorderRadius: [4, 4, 0, 0],
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#4fa6fe" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0582ff" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
          // shadowBlur: 5,
          // shadowColor: "rgba(93,200,250,0.4)",
          // shadowOffsetY: 0,
          // shadowOffsetX: 2
        }
      }, {
        type: "bar",
        barWidth: 26,
        barGap: "-100%",
        data: [],
        itemStyle: {
          color: "rgba(255,255,255,0.15)"
        }
      }]
  },
  // 两根柱状图
  twoBarOption: {
    tooltip: {
      trigger: "item",
      formatter: "{b}：{c}",
      backgroundColor: "rgba(0,0,0,0.9)",
      show: true,
      padding: [7, 15, 9, 15],
      textStyle: {
        color: "#fff",
        fontSize: 12
      },
      borderWidth: 0
    },
    legend: {
      align: "left",
      right: "5%",
      top: "3%",
      type: "plain",
      icon: "rect",
      itemWidth: 18,
      itemHeight: 2,
      textStyle: {
        color: "#7ec7ff",
        fontSize: 16
      },
      itemStyle: {
        borderWidth: 0
      },
      data: []
    },
    xAxis: {
      type: "category",
      axisLine: {
        lineStyle: {
          color: "rgba(0,120,255,0.3)",
          width: 1
        }
      },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: {
        // interval: 0,
        color: "#40a5f4",
        fontSize: 16
        // rotate: 15
      },
      data: [1]
    },
    yAxis: {
      type: "value",
      splitNumber: 5,
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: {
        lineStyle: {
          color: "rgba(0,120,255,0.3)",
          type: "solid"
        }
      },
      axisLabel: {
        color: "#40a5f4",
        fontSize: 16
      }
    },
    grid: {
      top: 60,
      left: 0,
      right: 10,
      bottom: 0,
      containLabel: true
    },
    series: [
      {
        name: "",
        data: [],
        type: "bar",
        barWidth: 12,
        label: {
          show: false
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#4fa6fe" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0582ff" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }, {
        name: "",
        type: "bar",
        barWidth: 12,
        data: [],
        itemStyle: {
          // barBorderRadius: [4, 4, 0, 0],
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#a3f8db" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#33cc99" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }]
  },
  // 横着的柱状图
  horizontalVBarOption: {
    tooltip: {
      trigger: "item",
      formatter: "{b}：{c}",
      backgroundColor: "rgba(0,0,0,0.9)",
      show: true,
      padding: [7, 15, 9, 15],
      textStyle: {
        color: "#fff",
        fontSize: 12
      },
      borderWidth: 0
    },
    grid: {
      left: "20",
      right: "5",
      bottom: "0",
      top: "40",
      containLabel: true
    },
    xAxis: {
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          color: "white"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        fontSize: 16
      }
    },
    yAxis: [{
      type: "category",
      inverse: true,
      axisLabel: {
        show: true,
        margin: 15,
        textStyle: {
          color: "#40a5f4",
          fontSize: 16
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: []
    }, {
      type: "category",
      axisTick: "none",
      axisLine: "none",
      inverse: true,
      axisLabel: {
        show: true,
        margin: 2,
        padding: 1,
        textStyle: {
          color: "#40a5f4",
          fontSize: "16"
        }
      },
      data: []
    }],
    series: [{
      name: "人数",
      type: "bar",
      zlevel: 1,
      itemStyle: {
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#0582ff" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#77bbff" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      barWidth: 10,
      inverse: true,
      data: []
    },
    {
      name: "背景",
      type: "bar",
      silent: true,
      barWidth: 10,
      barGap: "-100%",
      data: [],
      itemStyle: {
        normal: {
          color: "rgba(255,255,255,0.15)"
        }
      }
    }
    ]
  },
  lineOption: {
    legend: {
      align: "left",
      right: "5%",
      top: "3%",
      type: "plain",
      icon: "rect",
      itemWidth: 18,
      itemHeight: 2,
      textStyle: {
        color: "#7ec7ff",
        fontSize: 12
      },
      itemStyle: {
        borderWidth: 0
      },
      data: []
    },
    // animation: false,
    animationDelay: 0,
    // color: _this.$commonColors,
    grid: {
      // 图标距边框距离
      left: 0,
      right: "5%",
      top: "15%",
      bottom: "10%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: "rgba(0,120,255,0.3)",
          width: 1
        }
      },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: {
        // interval: 0,
        color: "#40a5f4",
        fontSize: 15,
        // rotate: 15,
        margin: 20
      },
      data: ["2015", "2016", "2017"]
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "rgba(0,120,255,0.3)",
          width: 1
        }
      },
      axisTick: { show: false },
      splitLine: {
        lineStyle: {
          color: "rgba(0,120,255,0.3)",
          type: "solid"
        }
      },
      axisLabel: {
        // interval: 0,
        color: "#40a5f4",
        fontSize: 16,
        rotate: 15
      }
    },
    series: [{
      name: "",
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 2,
          color: "#1890FF"
        }
      },
      itemStyle: {
        normal: {
          borderWidth: 2,
          borderColor: "#fff",
          color: "#1890FF"
        }
      },
      areaStyle: { // 区域填充样式
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(5,130,255,0.3)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(5,130,255,0)" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          shadowColor: "rgba(25,163,223, 0.5)", // 阴影颜色
          shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        }
      },
      type: "line",
      symbolSize: 2,
      z: 99,
      data: []
    }, {
      name: "",
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 2,
          color: "#48da97"
        }
      },
      itemStyle: {
        normal: {
          borderWidth: 2,
          borderColor: "#fff",
          color: "#48da97"
        }
      },
      areaStyle: { // 区域填充样式
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(72,218,151,0.3)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(72,218,151,0)" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          shadowColor: "rgba(25,163,223, 0.5)", // 阴影颜色
          shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        }
      },
      type: "line",
      symbolSize: 2,
      z: 99,
      data: []
    }, {
      name: "",
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 2,
          color: "#fe6e63"
        }
      },
      itemStyle: {
        normal: {
          borderWidth: 2,
          borderColor: "#fff",
          color: "#fe6e63"
        }
      },
      areaStyle: { // 区域填充样式
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(254,110,99,0.3)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(254,110,99,0)" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          shadowColor: "rgba(25,163,223, 0.5)", // 阴影颜色
          shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        }
      },
      type: "line",
      symbolSize: 2,
      z: 99,
      data: []
    }, {
      name: "",
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 2,
          color: "#ffcc5e"
        }
      },
      itemStyle: {
        normal: {
          borderWidth: 2,
          borderColor: "#fff",
          color: "#ffcc5e"
        }
      },
      areaStyle: { // 区域填充样式
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255,204,94,0.3)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255,204,94,0)" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          shadowColor: "rgba(25,163,223, 0.5)", // 阴影颜色
          shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        }
      },
      type: "line",
      symbolSize: 2,
      z: 99,
      data: []
    }],
    tooltip: {
      trigger: "axis",
      // formatter: "{b}：\n{c}{d}",
      backgroundColor: "rgba(0,0,0,0.9)",
      show: true,
      padding: [7, 15, 9, 15],
      textStyle: {
        color: "#fff",
        fontSize: 12
      },
      borderWidth: 0
    }
  },
  // 地图配置项
  mapOption: {
    tooltip: {
      show: true,
      backgroundColor: "rgba(0,0,0,0.8)",
      borderColor: "rgba(0,0,0,0.8)",
      textStyle: {
        color: "#fff"
      },
      // eslint-disable-next-line space-before-function-paren
      formatter: function(params) {
        console.log("params", params);
        let html = "";
        if (params.data) {
          html = "<div class='fd-tooltip-box'><p>" + params.name + "</p><p>" + params.marker + "&nbsp;&nbsp;现有确诊" + params.data.value + "&nbsp;&nbsp;" +
            "</p><p>" + params.marker + "&nbsp;&nbsp;累计确诊" + params.data.confirm + "&nbsp;&nbsp;" + "</p></div>";
        } else {
          html = "<div class='fd-tooltip-box'><p>" + params.name + "</p><p>暂无数据</p></div>";
        }

        return html;
      }
    },
    visualMap: {
      show: false,
      min: 0,
      max: 200,
      left: "20",
      top: "bottom",
      orient: "horizontal",
      inverse: true,
      calculable: true,
      seriesIndex: [0],
      text: ["高", "低"],
      inRange: {
        color: ["#01349c", "#01e0e6", "#eac15e", "#fbbd29"] // 蓝绿
      }
    },
    series: [{
      type: "map",
      mapType: "china",
      selectedMode: "false", // 是否允许选中多个区域
      zoom: 1.1,
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: true
        }
      },
      itemStyle: {
        normal: {
          areaColor: "#1790ff",
          borderColor: "rgba(55, 144, 235, 0.4)",
          borderWidth: "1"
        },
        emphasis: {
          areaColor: "#896ff4"
        }
      },
      data: []
    }]
  }
};
export default charts;
